<template>
  <v-page
    background="#f5f6fa"
    header-background="white"
    footer-background="white"
    padding-top="24rpx"
    :loading="loading"
  >
    <template #header>
      <v-navbar
        title="发布评论"
        native
      />
    </template>
    <template #default>
      <view>
        <!-- 商品展示 -->
        <comment-product :product="product" />

        <!-- 评价打分 -->
        <view class="comment-score">
          <view class="comment-score-text">
            <text>商品评价</text>
            <wd-rate
              v-model="formData.score_content.product_score"
              size="48rpx"
              space="30rpx"
              color="#E1D5D7"
              active-color="linear-gradient(161.57deg, #FF6F6F 28.44%, #FF2F3B 75.31%);"
            />
            <view class="grade-text">
              {{ getGradeText(formData.score_content.product_score) }}
            </view>
          </view>
          <view class="comment-score-text">
            <text>服务评价</text>
            <wd-rate
              v-model="formData.score_content.service_score"
              size="48rpx"
              space="30rpx"
              color="#E1D5D7"
              active-color="linear-gradient(161.57deg, #FF6F6F 28.44%, #FF2F3B 75.31%);"
            />
            <view class="grade-text">
              {{ getGradeText(formData.score_content.service_score) }}
            </view>
          </view>
          <view class="comment-score-text">
            <text>物流评价</text>
            <wd-rate
              v-model="formData.score_content.logistics_score"
              size="48rpx"
              space="30rpx"
              color="#E1D5D7"
              active-color="linear-gradient(161.57deg, #FF6F6F 28.44%, #FF2F3B 75.31%);"
            />
            <view class="grade-text">
              {{ getGradeText(formData.score_content.logistics_score) }}
            </view>
          </view>
        </view>

        <!-- 评价内容和图片 -->
        <order-comment-confirm-content ref="commentContentRef" />
      </view>
    </template>
    <template #footer>
      <view class="submit-button-container">
        <v-button
          type="primary"
          @click="submitHandle"
        >
          发布
        </v-button>
      </view>
    </template>
  </v-page>
</template>

<script setup lang="ts">
import CommentProduct from './modules/comment-product.vue';
import OrderCommentConfirmContent from './modules/order-comment-confirm-content.vue';

const loading = ref(true);
const product = ref();
const commentContentRef = ref<InstanceType<typeof OrderCommentConfirmContent>>();
const formData = ref({
  order_detail_id: '',
  sku_id: '',
  score_content: {
    order_score: 0,
    product_score: 0,
    service_score: 0,
    logistics_score: 0
  }
});

const getGradeText = (score: number) => {
  switch (score) {
    case 1:
      return '糟糕';
    case 2:
      return '需改进';
    case 3:
      return '还不错';
    case 4:
      return '满意';
    case 5:
      return '值得推荐';
    default:
      return '';
  }
};

onLoad(() => {
  const pageStore = $store.page();
  const parameters = pageStore.parameters as {
    order_detail_id: string;
    sku_id: string;
    score_content: {
      order_score: number;
      product_score: number;
      service_score: number;
      logistics_score: number;
    };
    product: OrderDetailVO;
  };

  product.value = parameters.product;

  formData.value.order_detail_id = parameters.order_detail_id;
  formData.value.sku_id = parameters.sku_id;
  formData.value.score_content = parameters.score_content;

  loading.value = false;
});

const valid = (params: PostOrderCommentData) => {
  if (params.score_content.product_score === 0) {
    uni.showToast({ title: '请对商品进行评价！', icon: 'none' });
    return false;
  }
  if (params.score_content.service_score === 0) {
    uni.showToast({ title: '请对服务进行评价！', icon: 'none' });
    return false;
  }
  if (params.score_content.logistics_score === 0) {
    uni.showToast({ title: '请对物流进行评价！', icon: 'none' });
    return false;
  }
  if ((params.comment_content as SpuCommentUnifyVO).comment_content.length < 10) {
    uni.showToast({ title: '请输入评论内容最少10个文字，详细的描述有助于更好地展示评论内容！', icon: 'none' });
    return false;
  }

  return true;
};

const submitHandle = async () => {
  if (!commentContentRef.value) return;
  const { content, images } = commentContentRef.value.getData();
  const params: PostOrderCommentData = {
    order_detail_id: formData.value.order_detail_id,
    sku_id: formData.value.sku_id,
    score_content: formData.value.score_content,
    comment_content: {
      comment_content: content,
      comment_images: images
    }
  };

  if (valid(params)) {
    const response = await $api.postOrderComment(params);
    switch (response.__error) {
      case undefined:
        uni.$emit('refresh-order-list');
        uni.navigateBack();
        uni.showToast({ title: '发布成功', icon: 'none' });
        break;
    }
  }
};

</script>
<style lang="scss" scoped>
.comment-score {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
  margin: 0 20rpx 24rpx;
  padding: 24rpx 25rpx;
  border-radius: 16rpx;
  background-color: white;
  align-items: stretch;
  gap: 16rpx;

  .comment-score-text {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 30rpx;
    text {
      font-style: normal;
      font-weight: 400;
      font-size: 26rpx;
      color: #333333;
    }

    .grade-text {
      font-style: normal;
      font-weight: 400;
      font-size: 26rpx;
      color: #ff2f3b;
    }
  }
}

.submit-button-container {
  margin: 24rpx;
}

.toast{
  background-color: #ff2f3b;
}
</style>
